import React, { Component } from 'react';
import { Descriptions, Image, Button, Typography } from 'antd';
import SignatureCanvas from 'react-signature-canvas';
import { getSalaryInfo,autograph } from '@/services/salary';

const { Title } = Typography;

let sigCanvas = undefined;
let app = undefined;
class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
        realname: "???",
        year: "0000",
        month: "0000",
        describe: "0000",
        examine: 0,
        isAutograph: false,
        image: "",
        endDate: "",
      };
  }
  async componentWillMount(){
    app = this;
    let salaryInfo = await getSalaryInfo(this.props.match.params.id);
    this.setState({
      realname: salaryInfo.data.user.realname,
      year: salaryInfo.data.salary.year,
      month: salaryInfo.data.salary.month,
      describe: salaryInfo.data.salaryList.describe,
      isAutograph: salaryInfo.data.salary_autograph != undefined && salaryInfo.data.salary_autograph.examine!=2,
      examine: salaryInfo.data.salary_autograph==undefined ? 0 : salaryInfo.data.salary_autograph.examine,
      image: salaryInfo.data.salary_autograph==undefined ? "" : salaryInfo.data.salary_autograph.image,
      endDate: salaryInfo.data.salary.end_time,
      basic_salary: salaryInfo.data.salaryList.basic_salary,
      commission: salaryInfo.data.salaryList.commission,
      bonus: salaryInfo.data.salaryList.bonus,
      social_supplement: salaryInfo.data.salaryList.social_supplement,
      housing_allowance: salaryInfo.data.salaryList.housing_allowance,
      late_payment: salaryInfo.data.salaryList.late_payment,
      leave_deduction: salaryInfo.data.salaryList.leave_deduction,
      gratitude_fund: salaryInfo.data.salaryList.gratitude_fund,
      credit: salaryInfo.data.salaryList.credit,
      unpaid_salary: salaryInfo.data.salaryList.unpaid_salary,
      unfreeze_salary: salaryInfo.data.salaryList.unfreeze_salary,
      remarks: salaryInfo.data.salaryList.remarks,
      recruitment_bonus: salaryInfo.data.salaryList.recruitment_bonus,
      job_allowance: salaryInfo.data.salaryList.job_allowance,
      performance: salaryInfo.data.salaryList.performance,
      other: salaryInfo.data.salaryList.other,
      actual_release: salaryInfo.data.salaryList.actual_release,
    });
  }
  async sumit(){
    await autograph({
      id: app.props.match.params.id,
      body: sigCanvas.toDataURL('image/png')
    });
    alert("已签名");
    location.reload();
  }
  clear(){
    sigCanvas.clear();
  }
  render() {
    return (      
      <div>
        <Descriptions 
          size={"middle"}
          bordered={true}
          column={1} >
          <Descriptions.Item label={<div style={{width:'80px'}}> 姓名           </div> }>{this.state.realname}</Descriptions.Item>
          <Descriptions.Item label={<div style={{width:'80px'}}> 年             </div> }>{this.state.year}</Descriptions.Item>
          <Descriptions.Item label={<div style={{width:'80px'}}> 月             </div> }>{this.state.month}</Descriptions.Item>
          <Descriptions.Item style={{color: "red"}} label={<div style={{width:'80px'}}> 实际发放        </div> }>{this.state.actual_release}</Descriptions.Item>
          <Descriptions.Item label={<div style={{width:'80px'}}> 签名截止日      </div> }>{this.state.endDate}</Descriptions.Item>
          <Descriptions.Item label={<div style={{width:'80px'}}> 是否审核        </div> }>{this.state.examine==0?'待审核':(this.state.examine==1?"审核通过":"审核未通过")}</Descriptions.Item>
          <Descriptions.Item label={<div style={{width:'80px'}}> 是否签名        </div> }>{this.state.isAutograph?'已签名':'未签名'}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.basic_salary == "0"? "none" : ""       }} label={<div style={{width:'80px'}}> 底薪           </div> }>{this.state.basic_salary}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.commission == "0"? "none" : ""         }} label={<div style={{width:'80px'}}> 佣金           </div> }>{this.state.commission}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.bonus == "0"? "none" : ""              }} label={<div style={{width:'80px'}}> 奖金           </div> }>{this.state.bonus}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.social_supplement == "0"? "none" : ""  }} label={<div style={{width:'80px'}}> 社保补助        </div> }>{this.state.social_supplement}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.housing_allowance == "0"? "none" : ""  }} label={<div style={{width:'80px'}}> 住房补贴        </div> }>{this.state.housing_allowance}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.late_payment == "0"? "none" : ""       }} label={<div style={{width:'80px'}}> 迟到扣款        </div> }>{this.state.late_payment}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.leave_deduction == "0"? "none" : ""    }} label={<div style={{width:'80px'}}> 事假扣款        </div> }>{this.state.leave_deduction}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.gratitude_fund == "0"? "none" : ""     }} label={<div style={{width:'80px'}}> 感恩基金扣款     </div> }>{this.state.gratitude_fund}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.credit == "0"? "none" : ""             }} label={<div style={{width:'80px'}}> 信誉保证金暂押   </div> }>{this.state.credit}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.unpaid_salary == "0"? "none" : ""      }} label={<div style={{width:'80px'}}> 未预付工资      </div> }>{this.state.unpaid_salary}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.unfreeze_salary == "0"? "none" : ""    }} label={<div style={{width:'80px'}}> 解冻薪资        </div> }>{this.state.unfreeze_salary}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.remarks == "0"? "none" : ""            }} label={<div style={{width:'80px'}}> 备注           </div> }>{this.state.remarks}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.recruitment_bonus == "0"? "none" : ""  }} label={<div style={{width:'80px'}}> 招聘奖金        </div> }>{this.state.recruitment_bonus}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.job_allowance == "0"? "none" : ""      }} label={<div style={{width:'80px'}}> 岗位津贴        </div> }>{this.state.job_allowance}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.performance == "0"? "none" : ""        }} label={<div style={{width:'80px'}}> 绩效           </div> }>{this.state.performance}</Descriptions.Item>
          <Descriptions.Item style={{display: this.state.other == "0"? "none" : ""              }} label={<div style={{width:'80px'}}> 其他扣款        </div> }>{this.state.other}</Descriptions.Item>
        </Descriptions>
        <div style={{textAlign: 'center',marginTop: "20px", display: (this.state.isAutograph?"none":"")}}>
          <Title>手写签名</Title>
        </div>
        
        <div style={{textAlign: 'center'}}>
          <div style={{border: "1px solid #000",width: "375px",margin:"0px auto", display: (this.state.isAutograph?"none":"")}}>
            <SignatureCanvas penColor='green'
              canvasProps={{width: "375", height: 200, className: 'sigCanvas'}}
              ref={(ref) => { sigCanvas = ref }} />
          </div>
        </div>    
        <br/>
        <div style={{textAlign: 'center', display: (this.state.isAutograph?"none":"")}}>
          <Button type="primary" onClick={this.clear}>重签</Button>
          <span>&nbsp;</span>
          <span>&nbsp;</span>
          <span>&nbsp;</span>
          <Button type="primary" onClick={this.sumit}>提交</Button>
        </div>
        <div style={{textAlign: 'center', display: (this.state.isAutograph?"":"none")}}>
            <Image width={200} src={this.state.image} preview={false} />
        </div>
      </div>
    );
  }
}
export default App;